<template>
    <div class="login">
        <Form
            ref="formInline"
            :model="formInline"
            :rules="ruleInline"
            show-message
            style="margin: 0 auto; width: 20%; padding-top: 300px"
        >
            <Form-item prop="user">
                <Input
                    type="text"
                    v-model="formInline.username"
                    placeholder="Username"
                >
                    <Icon type="ios-person" slot="prepend"></Icon>
                </Input>
            </Form-item>
            <Form-item prop="password">
                <Input
                    type="password"
                    v-model="formInline.password"
                    placeholder="Password"
                    ><Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </Form-item>
            <Form-item>
                <Button
                    type="primary"
                    @click="handleSubmit"
                    style="display: block; margin: 0 auto"
                    >登录</Button
                >
            </Form-item>
        </Form>
        <Vcode
            :show="isShow"
            @success="onSuccess"
            @close="onClose"
            @fail="onFail"
        />
        <Alert
            type="error"
            show-icon
            v-show="showError"
            style="margin: 0 auto; width: 30%"
        >
            错误
            <span slot="desc"> 验证失败，仔细一点哦/(ㄒoㄒ)/~~ </span>
        </Alert>
    </div>
</template>

<script>
// import * as THREE from "three";
// import RemoteJs from "../../components/Remotejs.vue";
import Vcode from "vue-puzzle-vcode";
export default {
    data() {
        return {
            formInline: {
                username: "",
                password: "",
            },
            ruleInline: {
                username: [
                    {
                        required: true,
                        message: "请填写用户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "请填写密码", trigger: "blur" },
                    {
                        type: "string",
                        min: 6,
                        message: "密码长度不能小于6位",
                        trigger: "blur",
                    },
                ],
            },
            isShow: false,
            showError: false,
        };
    },
    methods: {
        handleSubmit() {
            this.isShow = true;
        },
        onSuccess() {
            this.onClose();
            // 发送请求
            this.$store.dispatch("loginTest", [this.formInline, this.$router]);
        },
        onClose() {
            this.isShow = false;
        },
        onFail() {
            this.onClose();
            this.showError = true;
            setTimeout(() => {
                this.showError = false;
            }, 2100);
        },
    },
    components: { Vcode },
};
</script>

<style scoped>
div {
    color: black;
}
.login {
    height: 672px;
    background-image: url("../../assets/images/login.jpg");
}
</style>
